<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
 <%@ taglib uri="../../WEB-INF/translate.tld" prefix="ego" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<link rel="stylesheet" type="text/css" href="pub/dojo/dojo/resources/dojo.css" />
	<link rel="stylesheet" type="text/css" href="pub/dojo/dijit/themes/tundra/tundra.css" />
	<script type="text/javascript" src="pub/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> 
	<script type="text/javascript" src="pub/js/debug.js"></script>

	<script type="text/javascript">
		var cur_year = <%= request.getAttribute("year") %>;
		var remainingLeave = <%= request.getAttribute("remainingLeave") %>;
		var remainingLeavePrev = <%= request.getAttribute("remainingLeavePrevYear") %>;
		
		var year = cur_year;
	</script>
	
	<script type="text/javascript" src="modules/leave_account/script.js"></script>
	
	<style type="text/css">
	    @import "pub/dojo/dojox/grid/resources/Grid.css";
	    @import "pub/dojo/dojox/grid/resources/tundraGrid.css";
	    
	    body {
	    }
	    
	    table.head {
	    	width:100%;
	    	background-color:#edeeef;
	    }
	    table.foot {
	    	width:100%;
	    	background-color:#edeeef;
	    }
	    .foot th, .head th {
	    	-moz-background-clip:border;
			-moz-background-inline-policy:continuous;
			-moz-background-origin:padding;
			background:#E9E9E9 url(pub/dojo/dijit/themes/tundra/images/tabEnabled.png) repeat-x scroll center top;
			border-color:transparent #ACA899 #919191 transparent;
			border-width:1px;
			border-style:dotted;
			color:#000000 !important;
			padding-bottom:0;
	    }
	    .foot td, .head td {
	    	border-color:transparent #D5CDB5 #D5CDB5 transparent;
			border-style:dotted;
			border-width:1px;
			outline-color:-moz-use-text-color;
			outline-style:none;
			outline-width:medium;
			padding:3px;
			background-color: #fff;
	    }
	    
	    table {
	    	font-size: 12px;
	    }
	    
	    .status_accepted {
	    	background: url(modules/leave_account/img/accepted.png) no-repeat;
	    	padding-left: 20px;
	    }
	    .status_requested {
	    	background: url(modules/leave_account/img/requested.png) no-repeat;
	    	padding-left: 20px;
	    }
	    .status_denied {
	    	background: url(modules/leave_account/img/delete.png) no-repeat;
	    	padding-left: 20px;
	    }
	    
	    .btn_delete {
   	    	border:1px solid #6c7491;
	    	font-size: 10px;
	    	background: #f7f9ff url(modules/leave_account/img/delete.png) no-repeat;
	    	background-position: center;
	    	height:20px;
	    	font-family: verdana, sans-serif;
	    }
	    
	    #dlg_2 {
	    	text-align: center;
	    }
	    
	    #sel_year_cur {
	    	font-weight: bold;
	    	color: #000;
	    	text-decoration: none;
	    }
	    #sel_year_cur:hover {
	    	color: #118;
	    }
	</style>
	<title><ego:t>Leave Account</ego:t></title>
</head>
<body class="tundra">
	<center id="img"><img src="pub/img/login-loading.gif" /></center>
	
	<div id="form" style="visibility:hidden">
		<div dojoType="dojo.data.ItemFileWriteStore" url="?mdl=leave_account&action=read" jsId="store_leaves" clearOnClose="true"></div>
		<table class="head" width="100%">
			<tr>
				<td width="406">&nbsp;</td>
				<th width="320"><ego:t>leave entitlement for current year</ego:t></th>
				<td width=""><%= request.getAttribute("entitlementLeave") %></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<th><ego:t>remaining leave for previous year</ego:t></th>
				<td><span id="remainingLeavePrevYear"><%= request.getAttribute("remainingLeavePrevYear") %></span></td>
			</tr>
		</table>
		<table dojoType="dojox.grid.DataGrid"
			region="top" minSize="20" splitter="true"
			jsId="grid_leaves"
			store="store_leaves" query="{ }"
			style="height: 250px;"> 
			<thead> 
				<tr> 
					<th field="id" hidden="true"><ego:t>ID</ego:t></th> 
					<th field="start" width="182"><ego:t>First day</ego:t></th> 
					<th field="end" width="182"><ego:t>Last day</ego:t></th> 
					<th field="type" width="160"><ego:t>Type</ego:t></th> 
					<th field="status" width="150" formatter="format_status"><ego:t>Status</ego:t></th>
					<th field="length" width="49"><ego:t>Length</ego:t></th> 
					<th field="status" formatter="format_options" width="30">&nbsp;</th>
				</tr> 
			</thead> 
		</table>
		<table class="foot">
			<tr>
				<td width="406">&nbsp;</td>
				<th width="320"><ego:t>remaining leave</ego:t></th>
				<td><b id="remainingLeave"><%= request.getAttribute("remainingLeave") %></b></td>
			</tr>
		</table>
		<div jsId="dialog_deleteEntry" dojoType="dijit.Dialog" title="<ego:t>Cancel an application</ego:t>" style="width:150px;">
			<div id="dlg_1">
				<p>
					<ego:t>Are you sure</ego:t>?
				</p>
				<p>
					<button dojoType="dijit.form.Button" onClick="delete_submit();return false;"><ego:t>Yes</ego:t></button>
					<button dojoType="dijit.form.Button" onClick="dialog_deleteEntry.hide();"><ego:t>No</ego:t></button>
				</p>
			</div>
			<div id="dlg_2" style="display:none;">
				<img src="pub/img/login-loading.gif" /><br/>
				<ego:t>Please wait</ego:t>...
			</div>
		</div>
		<div jsId="dialog_empty" dojoType="dijit.Dialog" title="<ego:t>Hint</ego:t>" style="width:150px;text-align:center">
			<ego:t>No leaves</ego:t>.
		</div>
		<div style="text-align:center;">
			<a id="sel_year_prev" href="#" onclick="go_year(year-1);return false;">&lt;&lt; <ego:t>previous year</ego:t></a>
			|
			<a id="sel_year_cur" href="#" onclick="go_year(cur_year);return false;"><%= request.getAttribute("year") %></a>
			|
			<a id="sel_year_next" href="#" onclick="go_year(year+1);return false;"><ego:t>next year</ego:t> &gt;&gt;</a>
		</div>
	</div>
</body>
</html>
